<template>
  <div class="container yjy">
    <Header>
      <i slot='left'></i>
      购物车
    </Header>
    <div class="content">
      <ul class="cart" v-if='flag'>
        <li v-for="(item, index) of cartlist" :key="item.cartid">
          <van-checkbox v-model="item.flag" checked-color="#1989fa" @change="chang(item)" class="cart_select"></van-checkbox>
          <van-card :num="item.num > 0 ? item.num : item.num = 1" :price="item.price " :title="item.proname" :thumb="item.proimg" @click-thumb="detail(item.proid)">
            <div slot="footer">
              <van-button size="mini" @click="reduce(item)" class="cart_btn">-</van-button>
              <van-button size="mini" @click="add(item)" class="cart_btn">+</van-button>
              <van-button size="mini" @click="deleteItem(item, index)" class="cart_btn">删除</van-button>
            </div>
          </van-card>
        </li>
      </ul>
      <div class="nodata" v-else>
        <p>还没有加入商品呢，快去</p>
        <router-link to="/home">看看吧</router-link>
      </div>
      <van-submit-bar button-text="提交订单" @submit="onSubmit" :price="addprice" v-if="flag">
        <van-checkbox v-model="checked" @click="changeAll">全选</van-checkbox>
        <span>总数：</span><span>{{ addnum }}</span>
      </van-submit-bar>
    </div>
  </div>
</template>
<script>
import axios from '@/utils/request'
import Header from '@/components/header.vue'
import Vue from 'vue'
import { SubmitBar, Checkbox, Card, Button, Toast } from 'vant'

Vue.use(SubmitBar)
Vue.use(Checkbox)
Vue.use(Card)
Vue.use(Button)
export default {
  components: {
    Header
  },
  data () {
    return {
      cartlist: [],
      flag: false,
      checked: true
    }
  },
  computed: {
    addprice () {
      let price = 0
      this.cartlist.map(item => {
        item.flag ? price += item.num * item.price : price += 0
      })
      return price * 100
    },
    addnum () {
      let num = 0
      this.cartlist.map(item => {
        item.flag ? num += item.num : num += 0
      })
      return num
    }
  },
  created () {
    let userid = localStorage.getItem('userid')
    if (!localStorage.token) {
      this.$router.push('/login')
    }
    axios.get(`/cart?userid=${userid}`).then(res => {
      if (res.data.data.length === 0) {
        this.flag = false
      } else {
        this.flag = true
        let arr = res.data.data
        arr.map(item => {
          item.flag = true
        })
        this.cartlist = arr
      }
    })
  },
  methods: {
    detail (proid) {
      this.$router.push(`/detail/${proid}`)
    },
    reduce (item) {
      let num = --item.num
      let url = `/cart/update?num=${num}&cartid=${item.cartid}`
      axios.get(url).then(res => {
        if (res.data.code !== '200') {
          this.$router.push('/login')
        }
      })
    },
    add (item) {
      let num = ++item.num
      let url = `/cart/update?num=${num}&cartid=${item.cartid}`
      axios.get(url).then(res => {
        if (res.data.code !== '200') {
          this.$router.push('/login')
        }
      })
    },
    onSubmit () {
      const userid = localStorage.getItem('userid')
      let arr = []
      this.cartlist.map(item => {
        if (item.flag) {
          arr.push({
            cartid: item.cartid,
            proid: item.proid,
            num: item.num
          })
        }
      })
      if (arr.length === 0) {
        Toast('请选择商品')
      } else {
        let proid = ''
        let num = ''
        for (const i of arr) {
          proid += i.proid + ','
          num += i.num + ','
        }
        axios.post('/order/add', {
          userid,
          proid,
          num
        }).then(res => {
          sessionStorage.setItem('orderid', res.data.orderid)
          sessionStorage.couponid = ''
          this.$router.push('/decision')
          arr.map(item => {
            axios.get(`/cart/delete?cartid=${item.cartid}`)
          })
        })
      }
    },
    chang (item) {
      if (item.flag) {
        let flag = this.cartlist.every(item => {
          return item.flag === true
        })
        if (flag) {
          this.checked = true
        } else {
          this.checked = false
        }
      } else {
        this.checked = false
      }
    },
    changeAll () {
      if (this.checked) {
        this.cartlist.map(item => {
          item.flag = false
        })
      } else {
        this.cartlist.map(item => {
          item.flag = true
        })
      }
    },
    deleteItem (item, index) {
      axios.get(`/cart/delete?cartid=${item.cartid}`).then(res => {
        if (res.data.code !== '200') {
          this.$router.push('/login')
        } else {
          this.cartlist.splice(index, 1)
        }
      })
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.yjy{
  header {
    @include flexbox();
    @include justify-content(space-between);
  }
  .content {
    @include flex();
    @include rect(100%, auto);
    @include overflow();
    // @include margin(0 0 1rem 0);
    .nodata {
      @include rect(100%, 100%);
      @include flexbox();
      @include align-items();
      @include justify-content();
      background: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3214428190,3968304704&fm=26&gp=0.jpg') no-repeat;
      background-size: contain;
      font-size: .2rem;
      p, a {
        transform: translateY(.4rem)
      }
    }
    .van-submit-bar {
      bottom: 0.5rem;
      .van-checkbox {
        margin: 0 0.2rem;
      }
    }
    .cart {
      width: 100%;
      padding-bottom: .6rem;
      li {
        width: 100%;
      }
    }
    .van-card__content {
      @include font-size(.16rem);
      letter-spacing: .02rem;
      .van-card__bottom {
        @include margin(.1rem 0);
        @include font-size(.16rem);
      }
    }
    .cart_select {
      @include margin(.1rem);
    }
    .cart_btn {
      @include border-radius(.1rem);
    }
  }
}
</style>
